<template>
  <div>
    <select v-model="select">
      <option value="">请选择非遗项目</option>
      <option v-for="heritage in heritageList" :key="heritage.id" :value="heritage.id">
        {{ heritage.name }}
      </option>
    </select>
    <p v-if="select" class="detail-paragraph">
      {{ getHeritageDetail(select) }}
    </p>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const heritageList = ref([
  {
    id: 1,
    name: '京剧',
    detail: '京剧，又称平剧、京戏等，是中国影响最大的戏曲剧种，分布地以北京为中心，遍及全国各地。京剧在文学、表演、音乐、舞台美术等各个方面都有一套规范化的艺术表现形式。'
  },
  {
    id: 2,
    name: '针灸',
    detail: '针灸是针法和灸法的总称。针法是指在中医理论的指导下把针具（通常指毫针）按照一定的角度刺入患者体内，运用捻转与提插等针刺手法来对人体特定部位进行刺激从而达到治疗疾病的目的。灸法是以预制的灸炷或灸草在体表一定的穴位上烧灼、熏熨，利用热的刺激来预防和治疗疾病。'
  },
  {
    id: 3,
    name: '活字印刷术',
    detail: '活字印刷术是一种古代印刷方法，是中国古代劳动人民经过长期实践和研究才发明的。先制成单字的阳文反文字模，然后按照稿件把单字挑选出来，排列在字盘内，涂墨印刷，印完后再将字模拆出，留待下次排印时再次使用。'
  }
]);
const select = ref('');
const getHeritageDetail = (id) => {
  const item = heritageList.value.find(heritage => heritage.id === id);
  return item? item.detail : '';
};
</script>

<style scoped>
.detail-paragraph {
  margin-top: 10px;
  color: #333;
}
</style>    